<template>
    <div class="HomeTop">
        <!-- 页头 -->
        <a-row type="flex" justify="space-between" class="HomeTopCentent">
      		<a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
      		  	<ul class="nav-left hidden-xs-only">
                    <li>
                        <router-link to=""> 
                            <img src="../assets/image/表ia_10120.png" alt="">
                            <span>零售店</span>
                        </router-link>
                    </li>
                    <li>
                        <router-link :to="'/cart'"> 
                            <img src="../assets/image/表ia_10121.png" alt="">
                            <span>VR体验店</span>
                        </router-link>
                    </li>
                </ul>
                <ul class="xs-left">
                    <li>
                        <span class="iconfont icon-menu-fill"></span>
                        <span class='menu'>菜单</span>
                    </li>
                    <li>
                        <span class="iconfont icon-sousuo"></span>
                    </li>
                </ul>
      		</a-col>
            <a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
				<div class="logo">
                    <router-link :to="'/index'">
                        <img src="../assets/image/logo.svg" alt="" title="浪琴手表">
                    </router-link>
                </div>
      		</a-col>
      		<a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
      		  	<ul class="nav-right">
                    <li>
                        <router-link to=""> 
                            <span class="iconfont icon-sousuo hidden-xs-only"></span>
                            <span class="hidden-sm-and-down">搜索</span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to=""> 
                            <span class="iconfont icon-shoubiao"></span>
                            <span class="hidden-xs-only">表款比较</span>
                        </router-link>
                    </li>
                    <li :class="{show: name === 'MyAccount'}">
                        <router-link :to="'/myaccount'"> 
                            <span class="iconfont icon-user"></span>
                            <span class="hidden-xs-only">账户</span>
                        </router-link>
                    </li>
                    <!-- 购物袋 -->
                    <li :class="{conceal: name === 'Cart'}">
                        <a-dropdown placement="bottomRight" v-model="visible">
                            <div>
                                <router-link :to="'/cart'">
                                    <span class="iconfont icon-gouwudai"></span>
                                    <span class="hidden-xs-only">购物袋</span>
                                    <span :class="{num: true, numshow: cartshow}" >({{allNum}})</span>
                                    <!-- <span v-show="">{{}}</span> -->
                                </router-link>
                            </div>
                            <a-menu slot="overlay">
                                <a-menu-item :class="{noshow: !cartshow}">
                                    <ul class="goodsList">
                                        <li v-for="item in cartProducts" :key="item.id">
                                            <img :src="item.s_good.s_goods_photos[0].path" alt="">
                                            <div class="goodsList-right">
                                                <span>{{item.series}}</span>
                                                <span>{{item.s_good.name}}</span>
                                                <span class="subtotal">{{item.s_good.price | demoMoney}}</span>
                                                <div class="goodsList-right-num">
                                                    <span>数量：</span>
                                                    <a-input-number
                                                        :min="1" 
                                                        :max="999" 
                                                        :default-value="1" 
                                                        v-model="item.num"
                                                        @change="upGoodsNum(item)"
                                                    />
                                                </div>
                                            </div>
                                            <span @click="showConfirm(item.id)">
                                                <a-icon type="close" class="off"/>
                                            </span>
                                        </li>
                                    </ul>
                                    <div class="aggregate">
                                        <div>
                                            <span>总计：</span>
                                            <span>{{allPrice | demoMoney}}</span>
                                        </div>
                                        <router-link :to="'/cart'">
                                            <button>购物袋</button>
                                        </router-link> 
                                        <router-link to="">
                                            <button  @click="payment">结算支付</button>
                                        </router-link> 
                                    </div>
                                </a-menu-item>
                                <a-menu-item :class="{noshow: cartshow}">
                                    <div class="item2">
                                        购物袋为空
                                    </div>
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </li>
                </ul>
      		</a-col>
    	</a-row>
    </div>
</template>

<script>
import {mapMutations, mapState, mapGetters, mapActions} from 'vuex'
import {delCart, upCart} from '../assets/js/request.js'
export default {
    filters:{
        demoMoney(value) {
            return '￥' + value.toLocaleString() + ".00"
        }
    },
    created() {
        // 刷新获取购物车的商品并筛选
        if (this.$Cookie.get('user')) {
            this.getCartArr()
        }
        this.name = this.$route.matched[1].name
    },
    data() {
        return {
            url:"",
            name:'',
            visible: false,
        }
    },
    watch: {
        $route(newValue){
            this.name = this.$route.matched[1].name
        },
    },
    computed: {
        ...mapState('cart', ['cartProducts']),
        ...mapGetters('cart', ["cartshow", "allPrice", "allNum"]),
        ...mapState('address', ['cityAddressArr']),
    },
    methods: {
        ...mapMutations('cart', ['DelGoods']),
        ...mapActions('cart', ["getCartArr", 'AddCart']),
        ...mapActions('order', ['addOrder', "getOrder"]),
        // 商品数量改变的回调函数
        async upGoodsNum(data) {
            await upCart(data)
            this.getCartArr()
        },
        // 删除商品的对话框
        showConfirm(id) {
            // 确认框中用到的当前作用域this需要提前替换为局部变量，否则浏览器会提示无法获取该属性。
            let self = this
            this.$confirm({
                title: '您确定要从购物袋中移除此商品吗？',
                okText: '确认',
                cancelText: '取消',
                async onOk() {
                    // 删除后台购物车的对应商品
                    await delCart(id).then(() => {
                        // 删除vuex里商品
                        self.DelGoods(id)
                        self.$message.success('删除成功');
                    })
                    .catch((err) => {
                        self.$message.error('删除失败');
                    })
                },
                onCancel() {},
            });
        },
        // 结算添加订单请求
        async payment() {
            // 筛选出购物车里选中的商品
            let checkedArr = this.cartProducts.filter(item => {
                if(item.checked) {
                    return item
                }
            })
            // 没有收获地址的情况
            if(!this.cityAddressArr.length) {
                console.log(checkedArr)
                // 清除购物车的商品
                checkedArr.forEach(item => {
                    delCart(item.id);
                    this.DelGoods(item.id);
                })
                // 存储临时订单信息到浏览器缓存
                sessionStorage.setItem('temporary', JSON.stringify(checkedArr))
                this.$router.push('/order/0')
                return
            }
            if(checkedArr.length) {
                // 添加订单的goods_info参数
                let goods_infoArr = []
                checkedArr.forEach(item => {
                    let obj = {}
                    obj.id = item.goods_id
                    obj.num = item.num
                    goods_infoArr.push(obj)
                })
                // 添加订单要传的参数对象
                let addOrderObj = {}
                addOrderObj.goods_info = goods_infoArr
                addOrderObj.addr_id = this.cityAddressArr[0].id
                await this.addOrder(addOrderObj)
                .then((res) => {
                    // 添加成功后，删除选中的商品
                    checkedArr.forEach(item => {
                        delCart(item.id);
                        this.DelGoods(item.id);
                    })
                    this.$router.push(`/order/${res.id}`)
                    this.getOrder({project_id: 18, limit:100 })
                })
                .catch((err) => {
                    console.log(添加失败)
                })
            } else {
                this.$message.error('至少选择1个商品');
            }
            
        }
    }
}
</script>

<style lang="scss">
.HomeTop {
    width: 100%;
    background: white;
    .HomeTopCentent{
        width: 95%;
        height: 50px;
        line-height: 50px;
        margin: 0 auto;
        font-family: "Microsoft Yahei", 微软雅黑, 黑体, Heiti, 华文黑体, "ST Heiti", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        .logo {
            text-align: center;
            line-height: 50px;
            img{
                width: 126px;
                height: 32px;
                vertical-align: middle;
            }
        }
        .nav-left,
        .nav-right {
            display: flex;
            li {
                font-size: 12px;
                font-weight: bolder;
            }
        }
        .nav-left {
            li {
                font-size: 12px;
                font-weight: bolder;
                width: 100px;
                text-align: left;
                a {
                    display: flex;
                    color: #003150;
                    height: 50px;
                    align-items: center;
                    font-family: "Microsoft Yahei", 微软雅黑, 黑体, Heiti, 华文黑体, "ST Heiti", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
                    img {
                        margin-right: 10px;
                    } 
                }
            }
        }
        .xs-left {
            display: none;
            position: relative;
            margin: 0;
            @media (max-width: 768px) {
                display: flex;
                li {
                    color: #003150;
                    margin-right: 15px;
                    height: 50px;
                    .icon-menu-fill {
                        font-size: 25px;
                    }
                    .menu {
                        font-size: 12px;
                        font-weight: bold;
                        position: absolute;
                        bottom: -14px;
                        left: 1px;
                    }
                    .icon-sousuo {
                        font-weight: bolder;
                    }
                }
            }
        }
        .nav-right {
            justify-content: flex-end;
            li {
                flex: 1 1 auto;
                text-align: right;
                &:hover {
                    background: rgb(184, 184, 184);
                }
                // 鼠标放在下拉菜单触发的class
                .ant-dropdown-open {
                    background: rgb(184, 184, 184);
                }
                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #003150;
                    font-family: "Microsoft Yahei", 微软雅黑, 黑体, Heiti, 华文黑体, "ST Heiti", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
                    span {
                        text-align: center;
                        @media (min-width: 900px) {
                            padding: 0 4px;
                        }
                    }
                    .num {
                        margin: 0px;
                        display: none;
                    }
                    // 显示商品数量
                    .numshow {
                        display: inline-block;
                    }
                    .iconfont {
                        font-size: 20px;
                    }
                }
            }
            // 选中的状态
            .show {
                background: #003150;
                a {
                    color: white;
                }
            }
            // 购物选项隐藏
            .conceal {
                display: none;
            }
        }
    }
}
    // 购物车下拉菜单
    div {
        .ant-dropdown {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 980 !important;
            .ant-dropdown-menu {
                background: rgb(255, 255, 255);
                border-radius: 0px;
                padding: 0;
                // 显示购物车
                .show {
                    display: inline-block;
                }
                // 隐藏购物车
                .noshow {
                    display: none;
                }
                .ant-dropdown-menu-item {
                    background: white;
                    color: #84888b;
                    padding: 0;
                    // 添加的商品列表
                    .goodsList {
                        max-height: 325px;
                        overflow: auto;
                        li {
                            display: flex;
                            padding: 10px;
                            border-bottom: 1px solid #e4e4e4;
                            img {
                                width: 120px;
                                margin: 0 20px 0 0;
                            }
                            // 商品右边的价格详情
                            .goodsList-right {
                                width: 160px;
                                margin: 15px 0 0;
                                font-size: 14px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-evenly;
                                .subtotal {
                                    color: #003150;
                                    font-weight: 600;
                                }
                                // 计数器
                                .goodsList-right-num {
                                    display: flex;
                                    justify-content: space-between;
                                }
                            }
                            // 最右边的删除按钮
                            .off {
                                font-size: 20px;
                            }
                        }
                    }
                    // 购物袋下边的按钮和付款
                    .aggregate {
                        background: #84888b; 
                        color: #003150;   
                        display: flex;
                        flex-direction: column;
                        padding: 10px 25px 20px;
                        div {
                            display: flex;
                            justify-content: space-between;
                            font-size: 16px;
                            font-weight: 600;
                            margin: 10px 0 15px;
                        }
                        button {
                            width: 100%;
                            height: 60px;
                            background: #003150;
                            color: white;
                            font-size: 16px;
                            font-weight: 600;
                            margin-bottom: 20px;
                        }
                    }
                    // 空购物车的显示内容
                    .item2 {
                        font-size: 20px;
                        background: #84888b;
                        color: #003150;
                        padding: 15px;
                    }
                }
            }
        }
    }
    // 删除提示确认框
    div {
        .ant-modal-root {
            .ant-modal-wrap {
                .ant-modal {
                    .ant-modal-content {
                        .ant-modal-body {
                            .ant-modal-confirm-body-wrapper {
                                color: #003150;
                                .ant-modal-confirm-btns {
                                    width: 100%;
                                    display: flex;
                                    justify-content: center;
                                    .ant-btn {
                                        width: 100px;
                                        height: 40px;
                                        border-radius: 0px;
                                        background: #003150;
                                        color: white;
                                        &:hover {
                                            background: white;
                                            color: #003150;
                                            border: 1px solid #003150;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>